<template>
  <div>
    <Button>default</Button>
    <Button type="primary">Primary</Button>
    <Button type="ghost">Ghost</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="text">text</Button>
    <br><br>

    <Button type="info">msg button</Button>
    <Button type="success">success button</Button>
    <Button type="warning">warning button</Button>
    <Button type="error">error button</Button>

    <br><br>
    <Button type="primary" shape="circle" icon="ios-search"></Button>
    <Button type="primary" icon="ios-search">search</Button>
    <Button type="primary" shape="circle" icon="ios-search">search</Button>
    <Button type="primary" shape="circle">circle button</Button>

    <Button type="ghost" shape="circle" icon="ios-search"></Button>
    <Button type="ghost" icon="ios-search">search</Button>
    <Button type="ghost" shape="circle" icon="ios-search">search</Button>
    <Button type="ghost" shape="circle">circle button</Button>

    <h1>size</h1>

    <Button type="primary" size="large">Large</Button>
    <Button type="primary">Default</Button>
    <Button type="primary" size="small">Small</Button>

    <h1>long button</h1>
    <Button type="success" long>Submite</Button>
    <Button type="error" long>Delete</Button>

    <h1>disabled</h1>
    <Button type="primary" disabled>Disabled</Button>
    
    <h1>loading status</h1>
    <Button type="primary">Loading</Button>
    <Button type="primary">Loading</Button>
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    } 
  }
</script>

<style scoped>
  
</style>